import React from 'react'
import StoForm from '../components/StoForm/StoForm'

const uploadImg = () => console.log("uploadImg");
const clearImg = () => console.log("clearImg");
const getUserRole = () => console.log("getUserRole");

const formFrame = [
    [
        {
            label: "账号",
            required: true,
            type: "text",
            key: "username",
        },
        {
            label: "密码",
            required: true,
            type: "password",
            key: "password"
        },
        {
            type: "form",
            rowSpan: 3,
            formFrame: [
                [
                    {
                        type: "img",
                        size: [50, 50],
                        key: "avatar"
                    },
                ],
                [
                    {
                        type: "btn",
                        text: "上传",
                        callback: uploadImg,
                    },
                ]
            ]
        }
    ],
    [
        {
            label: "性别",
            type: "select",
            values: ["男", "女"],
            key: "gender"
        },
        {
            label: "性别",
            type: "select",
            values: ["男", "女"],
            key: "gender"
        },
    ],

    [
        {
            label: "创建人",
            type: "select",
            readonly: true,
            key: "creator"
        },
        {
            label: "创建人",
            type: "select",
            readonly: true,
            key: "creator"
        },
    ],
    [
        {
            label: "备注",
            // type:"textarea",
            type: "richtext",
            colSpan: 3,
            defaultRows: 15,
            key: "desc"
        }
    ]
]

const data = {
    username: "TheOutlawChang",
    password: "123456",
    avatar: "/vite.svg",
    gender: "女",
    creator: "张二",
    desc: `
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa porro perferendis error, odio voluptate deleniti, obcaecati quidem et minima ea, ullam delectus optio corporis fugiat officia quam accusamus ratione repudiandae.
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa porro perferendis error, odio voluptate deleniti, obcaecati quidem et minima ea, ullam delectus optio corporis fugiat officia quam accusamus ratione repudiandae.
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa porro perferendis error, odio voluptate deleniti, obcaecati quidem et minima ea, ullam delectus optio corporis fugiat officia quam accusamus ratione repudiandae.
    `
}

export default function FormDemo() {
    return (
        <div>
            <h3>FormDemo</h3>
            <br />
            <StoForm
                formTitle={'学生信息表'}
                formFrame={formFrame}
                formData={data}
                width={800}
                inset={false}
                editable={true}
                onConfirm={(newData: any) => {
                    console.log("onConfirm", newData);
                }}
            ></StoForm>
        </div>
    )
}
